class WordCloud {
    /**
     * 
     * @param {HTMLCanvasElement} canvas 
     * @param {*} words 
     */
    constructor(canvas, words) {
        this.canvas = canvas;
        // canvas.style.width = '600px';
        // canvas.style.height = '300px';
        canvas.width = this.canvas.clientWidth * window.devicePixelRatio;
        canvas.height = this.canvas.clientHeight * window.devicePixelRatio;


        this.ctx = canvas.getContext('2d');
        this.words = words;
        this.scale = 1;
        this.x = 0;
        this.y = 0;
        this.moveStep = 10;
        this.zoomStep = 0.1;

        // 初始化
        this.draw();
        this.bindEvent();
    }

    // 绘制词云
    draw() {
        this.canvas.width = this.canvas.clientWidth * window.devicePixelRatio;
        this.canvas.height = this.canvas.clientHeight * window.devicePixelRatio;
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.ctx.save();
        this.ctx.translate(this.canvas.width / 2 + this.x, this.canvas.height / 2 + this.y);
        // this.ctx.scale(this.scale, this.scale);
        for (let i = 0; i < this.words.length; i++) {
            let word = this.words[i];
            // 计算绘制位置
            let x = word.position[0] * this.scale + this.x;
            let y = word.position[1] * this.scale + this.y;
            this.ctx.font = `20px Arial`;
            this.ctx.fillStyle = word.color;
            this.ctx.fillText(word.text, x, y);
        }
        this.ctx.restore();
    }

    // 绑定事件
    bindEvent() {
        let self = this;
        let isDragging = false;
        let lastX = 0;
        let lastY = 0;

        // 拖拽
        this.canvas.addEventListener('mousedown', function (event) {
            isDragging = true;
            lastX = event.clientX;
            lastY = event.clientY;
        });

        this.canvas.addEventListener('mousemove', function (event) {
            if (isDragging) {
                let deltaX = event.clientX - lastX;
                let deltaY = event.clientY - lastY;
                self.x += deltaX;
                self.y += deltaY;
                self.draw();
                lastX = event.clientX;
                lastY = event.clientY;
            }
        });

        this.canvas.addEventListener('mouseup', function (event) {
            isDragging = false;
        });

        // 放大缩小
        window.addEventListener('keydown', function (event) {
            if (event.key === '[') {
                self.scale /= 1.4;
                self.recalculatePosition();
                self.draw();
            } else if (event.key === ']') {
                self.scale *= 1.4
                self.recalculatePosition();
                self.draw();
            }
        });
    }

    // 重新计算文本坐标
    recalculatePosition() {
        // for (let i = 0; i < this.words.length; i++) {
        //     let word = this.words[i];
        //     word.position[0] /= this.scale;
        //     word.position[1] /= this.scale;
        // }
    }
}